<template>
  <ul>
    <li><button @click="to('/home')">/home</button></li>
    <li><button @click="to('/login')">/login</button></li>
    <li><button @click="to('/index')">响应式基础 && Prop 校验</button></li>
    <li><button @click="to('/nextTick')">/nextTick</button></li>
    <li><button @click="to('/Ref')">shallowRef()&&triggerRef()</button></li>
    <li><button @click="to('/customRef')">customRef()</button></li>
    <li><button @click="to('/provide')">provide && inject</button></li>
    <li><button @click="to('/messagebox')">element Plus message组件的封装</button></li>
  </ul>
  <router-view></router-view>
 
</template>

<script setup>
import { useRouter } from 'vue-router';
const router=useRouter()
function to(path){
  router.push(path)
}
</script>

<style scoped>
ul{
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap:wrap;
  align-items: center;
  justify-content: space-evenly;
}
li{
  list-style: none;
  margin-top: 10px;
}
li:not(:first-child){
  margin-left: 20px;
}
</style>



